<script setup lang="ts">
import { PageWrapper, Scrollbar } from '@/components/Application'
import { useElementSize } from '@vueuse/core'

const wrapper = ref(null)
const current = ref(0)
const el = ref(null)
const div = ref(null)
const { height, width } = useElementSize(wrapper)

function update() {
  const ele = el.value[current.value]
  // 滚动
  ele?.scrollIntoView({ behavior: 'smooth', block: 'center' })
}
</script>

<template>
  <PageWrapper preset="card">
    <Scrollbar class="h-100px bg-fuchsia" :auto-hide="false">
      <div v-for="n in 10" :key="n">
        Example content
      </div>
    </Scrollbar>

    <Scrollbar class="w-200px" x-scrollable>
      <div class="h-100px w-400px bg-amber">
        123
      </div>
    </Scrollbar>

    <div ref="wrapper" class="h-200px w-full">
      <div ref="div" class="tabs">
        <div v-for="n in 30" :key="n" ref="el" class="m-20px h-100px w-20px bg-cyan">
          {{ n }}
        </div>
      </div>
    </div>
    <n-input-number v-model:value="current" @update:value="update" />
  </PageWrapper>
</template>

<style lang="less" scoped>
.tabs {
  width: calc(v-bind(height) * 1px);
  height: calc(v-bind(width) * 1px);
  // transform: rotate(90deg);
}
</style>
